<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
    ></search-header>

    <multi-fun-table
      :sortColumn="notFormatColumn"
      :orderType="sortType"
      :fixed-cols="fixedCols"
      :is-reset-table="isResetTable"
      :theads-info="theadsInfo"
      :tbodys-info="tbodysInfo"
      @handleMultiCheck="handleMultiCheck"
      @handleSortColumn="handleSortColumn"
      @searchFn="getList"
      @getNextPage="getNextPage"
    >
      <!--按钮-->
      <div class="operate-btn-group" slot="operateBtnGroup">
        <a
          class="ake_btn ake_btn_text"
          v-if="isPermmited('MOBILE:USER:ADD')"
          @click.prevent="toOpenUserAdd('userFormModal')"
        >新增</a>
      </div>

      <!--普通列-->
      <template slot="tdCell" slot-scope="props">
        <el-table-column
          :fixed="props.fixed"
          :label="props.label"
          :min-width="props.minWidth"
          :width="props.width"
          :prop="props.prop"
          :sortable="props.sortable"
        >
          <template slot-scope="scope">
            <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
            <span v-else-if="'parkList' == props.prop">
              <a
                class="imgLink"
                @click="ParkListModal_open(scope.row)"
              >查看({{scope.row.parkList.length}})</a>
            </span>
            <span v-else>{{ scope.row[props.prop] }}</span>
          </template>
        </el-table-column>
      </template>

      <!--操作列内的按钮-->
      <template slot="operateCell" slot-scope="props">
        <el-table-column
          :fixed="props.fixed"
          :label="props.label"
          width="120"
          class-name="operateCell"
        >
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              icon="icon-authority"
              class="ake-icon-font"
              title="设置权限"
              v-if="isPermmited('MOBILE:USER:SETAUTH')"
              @click="toOpenBindPark(scope.row,'bindParkModal','parkTree')"
              plain
            ></el-button>
            <el-button
              size="small"
              type="primary"
              icon="icon-edit"
              class="ake-icon-font"
              title="编辑"
              v-if="isPermmited('MOBILE:USER:UPDATE')"
              @click="toOpenUserEdit(scope.row,'userFormModal')"
              plain
            ></el-button>
            <el-button
              size="small"
              type="danger"
              icon="icon-delete"
              class="ake-icon-font"
              title="删除"
              v-if="isPermmited('MOBILE:USER:DEL')"
              @click="toOpenUserDelete(scope.row)"
              plain
            ></el-button>
          </template>
        </el-table-column>
      </template>
    </multi-fun-table>

    <!---->
    <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>

    <!--modal-->
    <!--至少选择一项  modal-->
    <basic-modal ref="voidTipModal" bodyTxt="请至少选择一项">
      <h3 slot="title">温馨提示</h3>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('voidTipModal')">关闭</button>
      </div>
    </basic-modal>

    <!--新增用户-->
    <basic-modal ref="userFormModal" width="700" customeClass="user-row-modal" static="true">
      <h3 slot="title">{{userFormModalTitle}}</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="userForm"
          :model="userEditForm"
          :rules="rules"
          label-position="left"
          label-width="80px"
          style="width: 500px"
        >
          <el-form-item label="账号" prop="userName1" v-if="this.userFormModalTitle=='编辑'">
            <el-input class="first-item" v-model="userEditForm.userName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="userName" v-else>
            <el-input class="first-item" v-model="userEditForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              class="first-item"
              v-model="userEditForm.password"
              type="password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="passwordAgain">
            <el-input
              class="first-item"
              v-model="userEditForm.passwordAgain"
              type="password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="realName">
            <el-input class="first-item" v-model="userEditForm.realName"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input class="first-item" v-model="userEditForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input class="first-item" v-model="userEditForm.email"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input type="textarea" class="first-item" v-model="userEditForm.address"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input type="textarea" class="first-item" v-model="userEditForm.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitForm('userForm')">确认</button>
        <button class="ake_btn ake_btn_text" @click="closed('userFormModal')">取消</button>
      </div>
    </basic-modal>

    <!--绑定停车场-->
    <basic-modal ref="bindParkModal" width="500" customeClass="select-park-modal" static="true">
      <h3 slot="title">设置车场权限</h3>
      <div class="modal-body" slot="modal-body">
        <div class="common-tree modal-tree-box">
          <ul id="parkTree" name="parkTree" class="ztree"></ul>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="bindParkingGroup('parkTree')"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('bindParkModal')">取消</button>
      </div>
    </basic-modal>

    <basic-modal ref="ParkListModal" static="true" width="500">
      <h3 slot="title">车场列表</h3>
      <div class="modal-body" slot="modal-body">
        <div class="tableDetial">
          <el-table :data="ParkListModalData.list" border style="width: 100%">
            <el-table-column type="index" width="100" label="序号"></el-table-column>
            <el-table-column prop="parkName" label="停车场名称"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('ParkListModal')">确定</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// 引进vue的js
import User from "./js/mobile_user.js";

export default {
  name: "mobileUser",
  mixins: [common, stardardList, invokeModal, User],
  data() {
    return {
      total: 0,
      fixedCols: 0,
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "text",
          name: "query_userName",
          text: "账号",
          value: ""
        },
        {
          index: 1,
          isShow: false,
          type: "text",
          name: "query_realName",
          text: "姓名",
          value: ""
        },
        {
          index: 2,
          isShow: false,
          type: "text",
          name: "query_phone",
          text: "手机号码",
          value: ""
        },
        {
          index: 3,
          isShow: false,
          type: "text",
          name: "query_desc",
          text: "描述",
          value: ""
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "userName",
          text: "账号",
          minWidth: 50
        },
        {
          index: 2,
          isShow: false,
          prop: "realName",
          text: "姓名",
          minWidth: 50
        },
        {
          index: 3,
          isShow: false,
          prop: "parkList",
          text: "管理权限",
          minWidth: 40
        },
        {
          index: 4,
          isShow: false,
          prop: "phone",
          text: "手机号码",
          minWidth: 60
        },
        {
          index: 5,
          isShow: false,
          prop: "email",
          text: "电子邮箱",
          minWidth: 60
        },
        {
          index: 6,
          isShow: false,
          prop: "address",
          text: "地址",
          minWidth: 70
        },
        {
          index: 7,
          isShow: false,
          prop: "desc",
          text: "描述",
          minWidth: 50
        }
      ],
      tbodysInfo: []
    };
  }
};
</script>

<style lang="less" scoped>
.user-row-modal {
  .first-item {
    width: 240px;
  }

  .el-form-item__error {
    color: #ff4949;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: static;
    top: 100%;
    left: 0;
  }
}

//调整transfer的样式
.user-transfer-modal {
  .modal-body {
    margin: 0 auto;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
  }

  .el-button + .el-button {
    margin-left: 0;
  }
}

.role-select {
  width: 240px;
}
</style>
